<template>
  <a-modal
    title='提成明细'
    :width='1600'
    :visible='visible'
    :destroyOnClose='true'
    :footer='true'
    @cancel='visible=false'
    @ok='submit'
  >
    <a-button type='primary' :loading='excelLoading' @click='handleExport'>导出为Excel</a-button>
    <s-table
      ref='table'
      rowKey='service_id'
      :loading='isLoading'
      :columns='columns'
      :data='loadData'
      :scroll='{y:500}'
      :pageSize='15'
    >
      <div slot='time' slot-scope='text, item'>
        <template v-if='item.month==0 || !text'>-</template>
        <template v-else>{{ text }}</template>
      </div>

      <div slot='create_time' slot-scope='text, item'>
        <template v-if=' !text'>-</template>
        <template v-else>{{ text }}</template>
      </div>
      <div slot='month' slot-scope='text, item'>
        {{ text ? text + '个月' : '一次性服务' }}
      </div>

      <div slot='tcfc' slot-scope='text, item'>
        <template v-if='position==0'>
          <a-tag v-if='item.sales_commission_type==0'>(成交价格-成本价格)*%</a-tag>
          <a-tag v-if='item.sales_commission_type==1'>固定金额</a-tag>
          <a-tag v-if='item.sales_commission_type==2'>每月提成</a-tag>
        </template>
        <template v-if='position==1'>
          <a-tag v-if='item.account_commission_type==0'>收款金额*()%</a-tag>
          <a-tag v-if='item.account_commission_type==1'>固定金额</a-tag>
          <a-tag v-if='item.account_commission_type==2'>每月提成</a-tag>
        </template>
        <template v-if='position==2'>
          <a-tag v-if='item.outworker_commission_type==0'>收款金额*()%</a-tag>
          <a-tag v-if='item.outworker_commission_type==1'>固定金额</a-tag>
          <a-tag v-if='item.outworker_commission_type==2'>每月提成</a-tag>
        </template>
      </div>
      <div slot='price' slot-scope='text, item'>
        <span style='color: red'>￥</span>{{ text }}
      </div>
      <div slot='tcje' slot-scope='text, item'>
        <template v-if='position==0'>
          <span style='color: red'>￥</span>{{ item.sales_commission }}
        </template>
        <template v-if='position==1'>
          <span style='color: red'>￥</span>{{ item.account_commission }}
        </template>
        <template v-if='position==2'>
          <span style='color: red'>￥</span>{{ item.outworker_commission }}
        </template>
      </div>

      <div slot='customer' slot-scope='text, item'>
        <div>客户姓名：{{ text.full_name || '-' }}</div>
        <div>身份证号：{{ text.idnumber || '-' }}</div>
        <div>公司名称：{{ text.corporate_name || '-' }}</div>
        <div>授权签约人：{{ text.signatory || '-' }}</div>
        <div>手机号码：{{ text.mobile || '-' }}</div>
      </div>
      <div class='actions' slot='action' slot-scope='text, item'>
        <a v-action:edit @click='handleEdit(item)'>编辑</a>
        <a v-action:delete @click='handleDelete(item)'>删除</a>
      </div>
    </s-table>
  </a-modal>
</template>
<script>
import * as Api from '@/api/customer/service'
import { STable } from '@/components'

export default {
  name: 'CommissionModel',
  components: { STable },
  data() {
    return {
      visible: false,
      queryParam: {
        store_user_id: '',
        year_month: ''
      },
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 表格 loading
      isLoading: false,
      // 表格字段
      columns: [
        {
          title: 'ID',
          width: 60,
          dataIndex: 'package_id'
        },
        {
          title: '客户信息',
          dataIndex: 'customer',
          width: 400,
          scopedSlots: { customRender: 'customer' }
        },
        {
          title: '服务名称',
          width: 200,
          dataIndex: 'service_name'
        },
        {
          title: '服务期限',
          dataIndex: 'month',
          scopedSlots: { customRender: 'month' }
        },
        {
          title: '开始日期',
          dataIndex: 'start_time_text',
          scopedSlots: { customRender: 'time' }
        },
        {
          title: '结束日期',
          dataIndex: 'end_time_text',
          scopedSlots: { customRender: 'time' }
        },
        {
          title: '录入时间',
          width: 200,
          dataIndex: 'create_time',
          scopedSlots: { customRender: 'create_time' }
        },
        {
          title: '提成结算方式',
          dataIndex: 'tcfc',
          width: 200,
          scopedSlots: { customRender: 'tcfc' }
        },
        {
          title: '成本金额',
          dataIndex: 'cost_price',
          scopedSlots: { customRender: 'price' }
        },
        {
          title: '成交金额',
          dataIndex: 'collection_price',
          scopedSlots: { customRender: 'price' }
        },
        {
          title: '提成金额',
          dataIndex: 'tcje',
          scopedSlots: { customRender: 'tcje' }
        }
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   width: '180px',
        //   scopedSlots: { customRender: 'action' }
        // }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: param => {
        return Api.list({ ...param, ...this.queryParam })
          .then(response => {
            return response.data.list
          })
      },
      // 0销售 1会计 2外勤
      position: '',

      excelLoading: false
    }
  },
  watch: {
    value(val) {
      this.sValue = val || null
    }
  },
  methods: {
    open(position) {
      this.position = position
      this.visible = true
    },
    // 触发change事件
    submit(value) {
      this.$emit('change', value)
    },

    handleExport() {
      this.excelLoading = true
      Api.list({ ...this.queryParam, export: 1 })
        .then(response => {
          this.downloadFile(response.data.list)
          this.excelLoading = false
        })
    },

    downloadFile(url) {
      try {
        let elementIftrame = document.createElement('iframe')
        elementIftrame.src = url
        elementIftrame.style.display = 'none'
        document.body.appendChild(elementIftrame)
      } catch (error) {
        console.log(error)
      }
    }
  }
}

</script>
<style scoped lang='less'>

</style>
